<template>
  <div class="hot-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >新手馆</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div class="ad">
      <img src="./img/shanghu.jpg">
    </div>

    <div class="store-wrapper">
      <div class="tit">选择店铺大小</div>
      <div class="store-group flex border-1px">
        <div class="store-item flex-1 border-right" :class="{selected: storeType==0}" @click="clickStoreType(0)" >
          <i class="icon icon-dianpu"></i>
          <p>30平米以下</p>
        </div>
        <div class="store-item  flex-1 border-right"  :class="{selected: storeType==1}" @click="clickStoreType(1)" >
          <i class="icon icon-dianpu5"></i>
          <p>30-60平米</p>
        </div>
        <div class="store-item  flex-1 border-right" :class="{selected: storeType==2}"  @click="clickStoreType(2)" >
          <i class="icon icon-dianpu1"></i>
          <p>60-100平米</p>
        </div>
        <div class="store-item  flex-1" :class="{selected: storeType==3}" @click="clickStoreType(3)" >
          <i class="icon icon-iconset0217"></i>
          <p>100平米以上</p>
        </div>
      </div>
    </div>
    <div class="pop-group"  v-show="isPop">
      <div class="tit">选择主营品类</div>
      <div class="list">
        <div class="item border-1px" v-for="item in categoryList" :class="{active: item.active}" @click="item.active=!item.active">{{item.name}}</div>
      </div>
      <div class="opt-group flex border-top">
        <div class="flex-1 cancel"  @click="isPop=false" >取消</div>
        <div class="flex-1 btn1" @click="ok">确认</div>
      </div>
    </div>
    <div class="fade"  @click="isPop=false" v-show="isPop"></div>
  </div>
</template>
<script>
  const storeList = [
    {tagId: '15',labelName: '30平米以下'},
    {tagId: '17',labelName: '30-60平米'},
    {tagId: '16',labelName: '60-100平米'},
    {tagId: '4',labelName: '100平米以上'},
  ];
    export default {
        props: {},
        data() {
            return {
              isPop: false,
              storeType: null,
              categoryList: []
            };
        },
        methods: {
          clickStoreType: function(type){
              this.storeType = type;
              this.isPop = true;
          },
          /**
           * 获取选中的商品分类
           * @return <String> 以逗号分隔
           * */
          getCate: function(){
              let cates = [];
              this.categoryList.forEach(item=>{
                  if(item.active){
                      cates.push(item.id);
                  }
              })
            return cates.join(',');
          },
          ok: function(){
            let store = storeList[this.storeType];
             this.$router.push({name: 'goodsListNewbie', params: {tagId: store.tagId, labelName: store.labelName, cateId: this.getCate()}});
          },
          //获取分类列表
          getCategory(){
            getCategory({siteId: Cookie.get('siteId')}).then(data =>{
              if(data.returnCode == '000000'){
                this.categoryList = data.result.categoryList;
                [].forEach.call(this.categoryList, item=>{
                  this.$set(item, 'active', false);
                })
              }
            });
          },
        },
        filters: {},
        created() {
          this.getCategory();
        },
        mounted(){

        },
        components: {
        }
    };
</script>
<style lang="less">
  @import "./hot.less";
  @import "./newbie.less";
</style>

